<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { reactive,ref } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useCounterStore} from '../../stores/counter'
import {AmdinUserData,GetUsersdata} from "../../api/center"
const counter=useCounterStore()
const state = reactive({
  circleUrl:
    'https://ts1.tc.mm.bing.net/th/id/OIP-C.z8hLJ-r4jBsa1dYRotjnYgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3',
})
// console.log(counter.user.id);
const userForm=ref({
   id:counter.users.id,
   user:counter.users.user,
   image:counter.users.image,
   text:counter.users.text,
   sex:"男"
})
const ruleFormRef=ref()
const rules=({
    user: [
    { required: true, message: '不能为空', trigger: 'blur' },
     ],
    text: [
    { required: true, message: '不能为空', trigger: 'blur' },
     ],
})
// const imageUrl = ref('')
//每次选择完图片之后的回调
const handleChange=async(file)=>{
    console.log(file);
    userForm.value.avatar=URL.createObjectURL(file.raw)    
}
const ImageUpload=(response)=>{
   console.log(response.url);
   userForm.value.image=response.url
}
// 更新信息
const onSubmit=async()=>{
        if(userForm.value.user==="") {
           return ElMessage.error('用户名不能为空') 
        }else{
        const res=await AmdinUserData(userForm.value)
        console.log(res);
        UsersData()
          ElMessage({
          message:res.data.massage,
          type: 'success',
          })
        userForm.value.avatar=""
        UsersData()
        }
}
const UsersData = async()=>{
  const res=await GetUsersdata(counter.users.id)
  console.log(res);
  counter.AmdinUser(res.data.users)
}

</script>
<template>
    <div class="center">
      <el-page-header icon="" content="个人中心" title="企业管理后台"></el-page-header>
      <div class="flex">   
        <el-card class="cardi" style="width: 380px" shadow="always">
        <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="120" :src="state.circleUrl" v-if="!counter.users.image"/> 
          <el-avatar :size="120" :src="counter.users.image" v-else/> 
          <div>
            <p>{{counter.users.user}}</p>
            <p>{{ counter.users.text }}</p>
          </div>
        </div>
         
      </div>
        </el-card>
        <el-card class="cards" style="width: 100%" shadow="never">
        <template #header>
        <div class="card-header">
        <span>管理者信息</span>
      </div>
      </template>
    <el-form
    ref="ruleFormRef"
     status-icon
    :rules="rules"
    :model="userForm"
    label-width="auto"
    >
     <el-form-item label="用户名" prop="name">
      <el-input v-model="userForm.user" style="width: 240px"/>
    </el-form-item>
    <el-form-item label="性别" prop="name">
      <el-input v-model="userForm.sex" style="width: 240px"/>
    </el-form-item>
    <el-form-item label="个人简历" prop="name">
      <el-input type="textarea" v-model="userForm.text" style="width: 240px"/>
    </el-form-item>
        <el-form-item label="头像" prop="name">
            <el-upload
                v-model="headimag"
                class="avatar-uploader"
                action="http://127.0.0.1:5000/amdin/imags/imag"
               :show-file-list="false"
               :on-change="handleChange"
               :auto-upload="true"
               :on-success="ImageUpload"
                >
               <img v-if="userForm.avatar" :src="userForm.avatar" class="avatar" />
               <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
               </el-upload>
    </el-form-item>
             <el-form-item>
      <el-button type="primary" @click="onSubmit">更新信息</el-button>
             </el-form-item>
    </el-form>
       </el-card>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .center{
        .flex{
            margin-top: 25px;
            display: flex;
            height: 100%;
            width: 100vw;
           .cardi{
               height: 300px;
               justify-content: center;
               align-items: center;
               display: flex;
               .block{
                text-align: center;
                p{
                    margin-top: 10px;
                }
               }
           }
           .cards{
            height: 100%;
            margin-left: 15px;
           }
        }
    }
.avatar{
  object-fit: cover;
}
:deep(.avatar-uploader .avatar) {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>